<template>
    <div class="addHouse">
        <div class="top">
            <!--下拉切换-->
            <div class="main" style="justify-content: space-between;flex-direction: inherit;width: 740px;">
                <CommonSelectRouter :dataList="addHouseRouter.data"
                    :default="this.$route.query.convert ? addHouseRouter.default + '(' + $t('text.House.l128') + ')' : addHouseRouter.default"
                    @returnData="getRouter" isLock>
                </CommonSelectRouter>
                <el-button type="primary" @click="handleClick" style="width: 85px;height: 30px;color: white;"
                    color="#6698ff" :loading="loading">{{
                        $t("text.House.l144") }}</el-button>
            </div>
        </div>
        <div class="main">
            <!--表单结构渲染-->
            <div v-if="isload">

                <div style="width: 100%;">
                    <div class="headTitle">{{ $t('text.PageData.l205') }}</div>
                    <div class="df">
                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l206') }}</div>
                            <div class="editDiv" @click="showOwnerClick"
                                v-if="isEdit && !showOwner || isEdit && !editPower.editOwner">
                                {{ $t('text.PageData.l207') }}
                            </div>
                            <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l208')" ref="child1"
                                insertKey="ownerName" v-if="showOwner && editPower.editOwner || !isEdit"
                                @returnData="setData" :isNumber="0" :default="insertData.ownerName">
                            </CommonInputKey>
                        </div>
                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l209') }}</div>
                            <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l210')" insertKey="ownerPhone"
                                v-if="showOwner && editPower.editOwner || !isEdit" ref="child2" @returnData="setData"
                                :isNumber="1" :default="insertData.ownerPhone" :is-format="false">
                            </CommonInputKey>
                            <div v-else style="height: 24px;"></div>
                        </div>

                        <div style="width: 100%;"></div>

                        <div style="padding-right: 15px;" v-if="insertData.houseType != 3">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l211') }}</div>
                            <CommonInputAndSelect :isMust="!isEdit" :mustHit="$t('text.PageData.l212')"
                                insertKey="community" :dataList="community" @returnData="setData" ref="child3" :isNumber="0"
                                :disabled="isEdit ? !editPower.editCommunity : false" :default="insertData.community">
                            </CommonInputAndSelect>
                        </div>

                        <div style="padding-right: 15px;" v-if="insertData.houseType != 3 && insertData.houseType != 4">
                            <div class="title"><span class="must">※</span>{{ insertData.houseType == 0 ?
                                $t('text.PageData.l213') : $t('text.PageData.l350')
                            }}</div>
                            <div class="editDiv" @click="showPlateClick"
                                v-if="!showPlate && isEdit || !editPower.editPlate && isEdit">
                                {{ $t('text.PageData.l214') }}</div>
                            <CommonInputAndUnitSelect :dataList="[$t('text.PageData.l215'), $t('text.PageData.l216')]"
                                :default="$t('text.PageData.l215')" :isMust="!isEdit" :mustHit="$t('text.PageData.l217')"
                                v-if="showPlate && editPower.editPlate || !isEdit" insertKey="building"
                                :value="insertData.building" ref="child4" @returnData="setData">
                            </CommonInputAndUnitSelect>
                        </div>
                        <div style="padding-right: 15px;" v-if="insertData.houseType != 3 && insertData.houseType != 4">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l219') }}</div>
                            <CommonInputAndUnitSelect :dataList="[$t('text.PageData.l219'), $t('text.PageData.l220')]"
                                :default="$t('text.PageData.l219')" :isMust="!isEdit" :mustHit="$t('text.PageData.l221')"
                                v-if="showPlate && editPower.editPlate || !isEdit" insertKey="unit" :value="insertData.unit"
                                ref="child5" @returnData="setData">
                            </CommonInputAndUnitSelect>
                            <div v-else style="height: 24px;"></div>
                        </div>

                        <div style="padding-right: 15px;" v-if="insertData.houseType != 3 && insertData.houseType != 4">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l222') }}</div>
                            <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l223')" insertKey="roomIdentifier"
                                v-if="showPlate && editPower.editPlate || !isEdit" @returnData="setData" :isNumber="0"
                                ref="child6" :default="insertData.roomIdentifier">
                            </CommonInputKey>
                            <div v-else style="height: 24px;"></div>
                        </div>

                        <div style="padding-right: 15px;" v-if="insertData.houseType == 3">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l190') }}</div>
                            <RadioSelect v-if="insertData.houseType == 3" :selectList="areaList" @returnData="setData"
                                searchKey="areaIds" :fastSearch="insertData.area" :showStyle="{
                                    fontSize: '12px', height: '22px', border: '1px solid rgb(238, 238, 238)', borderRadius: '4px',
                                    width: '158px', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center'
                                }" isArea isShowTitle isShowSerach1>
                            </RadioSelect>

                            <!-- <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l191')" insertKey="region"
                                @returnData="setData" :isNumber="0" ref="child7" :default="insertData.region">
                            </CommonInputKey> -->
                        </div>

                        <!-- <div style="padding-right: 15px;" v-if="insertData.houseType == 3">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l192') }}</div>
                            <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l193')"
                                insertKey="businessDistrict" @returnData="setData" :isNumber="0" ref="child8"
                                :default="insertData.region">
                            </CommonInputKey>
                        </div> -->

                        <div style="padding-right: 15px;" v-if="insertData.houseType == 3">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l224') }}</div>
                            <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l225')" insertKey="address"
                                @returnData="setData2" :isNumber="0" ref="child9" :default="insertData.address">
                            </CommonInputKey>
                        </div>

                        <div style="padding-right: 15px;padding-top: 8px;"  v-if="insertData.houseType == 3">
                            <DialogLayout46 @returnData="setMapAddress" :mapCoordinates="mapCoordinates" v-if="mapType">
                            </DialogLayout46>
                            <DialogLayout36 @returnData="setMapAddress" :mapCoordinates="mapCoordinates" v-else>
                            </DialogLayout36>
                        </div>

                        <div style="padding-right: 15px;" v-if="insertData.houseType == 4">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l226') }}</div>
                            <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l227')"
                                insertKey="parkingIdentifier" @returnData="setData" :isNumber="0" ref="child10"
                                :default="insertData.parkingIdentifier">
                            </CommonInputKey>
                        </div>

                    </div>
                </div>

                <div style="width: 100%;">
                    <div class="headTitle">{{ $t('text.PageData.l2') }}</div>
                    <div class="df2">
                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l228') }}</div>
                            <CommonSelectKey :dataList="dictionaryTree.housingGrade" :isMust="!isEdit"
                                :mustHit="$t('text.PageData.l229')" insertKey="housingGrade" @returnData="setData"
                                :disabled="isEdit ? !editPower.editHousingGrade : false" ref="child11"
                                :default="isEdit ? editPower.editHousingGrade ? insertData.housingGrade : $t('text.PageData.l230') :
                                    insertData.housingGrade == null || insertData.housingGrade == '' ? $t('text.PageData.l231') : $t('text.PageData.l231')"
                                :isSelect="insertData.housingGrade == null ? false : isEdit ? !editPower.editHousingGrade ? false : true : false">
                            </CommonSelectKey>
                        </div>
                        <div style="padding-right: 15px;">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l232') }}</div>
                            <CommonSelectKey :dataList="dictionaryTree.floorType" :isMust="!isEdit"
                                :mustHit="$t('text.PageData.l233')" :disabled="isEdit" insertKey="floorType"
                                @returnData="setData" ref="child12"
                                :default="isEdit ? insertData.floorType == null || insertData.floorType == '' ? $t('text.PageData.l234') :
                                    isEdit ? insertData.floorType + $t('text.PageData.l234') : insertData.floorType : $t('text.PageData.l235')">
                            </CommonSelectKey>
                        </div>
                        <div style="width: 100%;"></div>
                        <div style="padding-right: 15px;" v-if="insertData.houseClass == 0">
                            <div class="title"><span class="must">※</span>{{ $t('text.PageData.l236') }}</div>
                            <CommonInputKey :isMust="!isEdit" :mustHit="$t('text.PageData.l237')" insertKey="price"
                                ref="child13"
                                :leftText="isEdit ? editPower.editPrice ? $t('text.PageData.l25') : $t('text.PageData.l230') : $t('text.PageData.l25')"
                                :disabled="isEdit ? !editPower.editPrice : false" @returnData="setData"
                                :default="insertData.price">
                            </CommonInputKey>
                        </div>
                        <div style="padding-right: 15px;" v-if="insertData.houseClass == 0">
                            <div class="title">{{ $t('text.PageData.l238') }}</div>
                            <div class="editDiv" @click="showBasePriceClick"
                                v-if="!showBasePrice && isEdit || !editPower.editBasePrice && isEdit">
                                {{ $t('text.PageData.l239') }}</div>
                            <CommonInputKey v-if="showBasePrice && editPower.editBasePrice || !isEdit" insertKey="basePrice"
                                @returnData="setData" :leftText="$t('text.PageData.l25')" :default="insertData.basePrice">
                            </CommonInputKey>
                        </div>
                    </div>
                </div>

                <div v-for="(s, index1) in addHousePage" v-bind:key="s.headTitle" style="width: 100%;">
                    <div class="headTitle" v-if="s.headTitle != ''">{{ s.headTitle }}</div>
                    <div class="df">
                        <div v-for="(item, index2) in s.data" v-bind:key="item.title"
                            :style="item.type == 'radio' || item.type == 'br' ? { paddingRight: '15px', width: '100%' } : { paddingRight: '15px' }">

                            <div class="title" v-if="item.type != 'br'"><span class="must" v-if="item.isMust">※</span>{{
                                item.title }}</div>
                            <CommonInputKey v-if="item.type == 'input'" :leftText="item.defaultUnit" :isMust="item.isMust"
                                :mustHit="item.mustHit" :insertKey="item.insertKey" @returnData="setData"
                                :isNumber="item.isNumber" :ref="'childs' + index1 + index2" :min="item.min" :max="item.max"
                                :default="insertData[item.insertKey]">
                            </CommonInputKey>

                            <CommonRadioKey v-if="item.type == 'radio'" :dataList="dictionaryTree[item.dictionaryKey]"
                                :isMust="item.isMust" :mustHit="item.mustHit" :insertKey="item.insertKey"
                                @returnData="setData" :ref="'childs' + index1 + index2" :default="getRR(item.insertKey)">
                            </CommonRadioKey>

                            <CommonSelectKey v-if="item.type == 'select'" :dataList="dictionaryTree[item.dictionaryKey]"
                                :isMust="item.isMust" :mustHit="item.mustHit" :insertKey="item.insertKey"
                                @returnData="setData" :ref="'childs' + index1 + index2"
                                :default="isEdit ? insertData[item.insertKey] == null || insertData[item.insertKey] == '' ? item.default : getSelectDefault(item.insertKey) : item.default"
                                :isSelect="insertData[item.insertKey] == null ? false : isEdit">
                            </CommonSelectKey>

                            <CommonTextarea v-if="item.type == 'textarea'" :defaults="item.default"
                                :insertKey="item.insertKey" @returnData="setData" class="main"
                                :value="insertData[item.insertKey]" :maxlength="200">
                            </CommonTextarea>

                            <CommonInputTime v-if="item.type == 'time'" :leftText="item.defaultUnit" :isMust="item.isMust"
                                :mustHit="item.mustHit" :insertKey="item.insertKey" @returnData="setData"
                                :ref="'childs' + index1 + index2"
                                :default="isEdit ? insertData[item.insertKey] == null || insertData[item.insertKey] == '' ? item.default : insertData[item.insertKey] : item.default">
                            </CommonInputTime>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script>
import { ElMessage } from 'element-plus'
import { addHousePage1, addHousePage2, addHousePage3, addHousePage4, addHousePage5, addHousePage6, addHousePage7, addHousePage8, addHousePage9, addHousePage10 } from '../../itemList';
import { getInsertDropdownData, houseInsert, communityFindAll, houseUpdate, getPermField, lookDoorPlate, lookOwnerInfo, hireSellChange, areaFindTreeAll } from '../../http/api'

import CommonSelectRouter from '../../components/input/CommonSelectRouter.vue';
import CommonInputKey from '../../components/input/CommonInputKey.vue';
import CommonInputAndSelect from '../../components/input/CommonInputAndSelect.vue';
import CommonSelectKey from '../../components/input/CommonSelectKey.vue';
import CommonRadioKey from '../../components/input/CommonRadioKey.vue';
import CommonTextarea from '../../components/input/CommonTextarea.vue';
import CommonInputTime from '../../components/input/CommonInputTime.vue'
import CommonInputAndUnitSelect from '../../components/input/CommonInputAndUnitSelect.vue'
import RadioSelect from '@/components/select/RadioSelect.vue';
export default {
    name: 'AddHouse',
    components: {
        CommonSelectRouter: CommonSelectRouter,
        CommonInputKey: CommonInputKey,
        CommonInputAndSelect: CommonInputAndSelect,
        CommonSelectKey: CommonSelectKey,
        CommonRadioKey: CommonRadioKey,
        CommonTextarea: CommonTextarea,
        CommonInputTime: CommonInputTime,
        CommonInputAndUnitSelect: CommonInputAndUnitSelect,
        RadioSelect
    },
    data() {
        return {
            addHouseRouter: {
                default: this.$t("text.House.l138"),
                data: [
                    { id: 1, name: this.$t("text.House.l138") },
                    { id: 2, name: this.$t("text.House.l139") },
                    { id: 3, name: this.$t("text.House.l140") },
                    { id: 4, name: this.$t("text.House.l141") },
                    { id: 5, name: this.$t("text.House.l142") },
                    { id: 6, name: this.$t("text.House.l143") },
                    { id: 7, name: this.$t("text.House.l295") },
                    { id: 8, name: this.$t("text.House.l296") },
                    { id: 9, name: this.$t("text.House.l297") },
                    { id: 10, name: this.$t("text.House.l298") },
                ]
            },
            addHouseRouter2: {
                data: [
                    { id: 1, name: this.$t("text.Common.l45") },
                    { id: 2, name: this.$t("text.Common.l46") },
                    { id: 3, name: this.$t("text.Common.l47") },
                    { id: 4, name: this.$t("text.Common.l48") },
                    { id: 5, name: this.$t("text.Common.l49") },
                    { id: 6, name: this.$t("text.Common.l50") },
                    { id: 7, name: this.$t("text.Common.l51") },
                    { id: 8, name: this.$t("text.Common.l52") },
                    { id: 9, name: this.$t("text.Common.l53") },
                    { id: 10, name: this.$t("text.Common.l54") },
                ]
            },
            addHousePage: addHousePage1,
            dictionaryTree: {},
            isload: false,
            insertData: { houseClass: 0, houseType: 0 },
            insertDataDefault: {},
            dictConver: ['elevatorStatus', 'isDivideRent', 'isNearStreet', 'isRegisterCompany', 'isUniqueHousing', 'mortgageStatus'],  //需要进行默认填充值转换
            community: [],  //区域列表
            isEdit: false,
            editPower: {    //编辑权限
                editBasePrice: false,
                editCommunity: false,
                editHousingGrade: false,
                editOther: false,
                editOwner: false,
                editPlate: false,
                editPrice: false,
            },
            showOwner: false,
            showPlate: false,
            showBasePrice: false,
            loading: false,
            areaList: [],
            mapType: localStorage.getItem('mapType') == 'mapkit' ? true : false,
            mapCoordinates: [],
        }
    },
    mounted() {

        //获取新增类型
        if (this.$route.query.index != undefined) {
            this.getRouter(Number(this.$route.query.index) + 1)
            this.addHouseRouter.default = this.addHouseRouter.data.find(v => v.id === Number(this.$route.query.index) + 1)?.name || '';
        }
        //编辑房源
        if (this.$route.query.edit == 'true' && localStorage.getItem("addHouse") != null) {
            this.isEdit = true
            let temp = JSON.parse(localStorage.getItem("addHouse"))
            if (temp.mapCoordinates && temp.mapCoordinates != "") {
                this.mapCoordinates = temp.mapCoordinates.split(",")
            }
            if (temp.houseClass == '0') {
                this.getRouter(Number(temp.houseType) + 1)
                this.addHouseRouter.default = this.addHouseRouter2.data.find(v => v.id === Number(temp.houseType) + 1)?.name || '';
            } else {
                this.getRouter(Number(temp.houseType) + 6)
                this.addHouseRouter.default = this.addHouseRouter2.data.find(v => v.id === Number(temp.houseType) + 6)?.name || '';
            }
            //去请求编辑权限
            getPermField({ houseId: temp.id }).then(res => {
                if (res !== undefined) {
                    this.editPower = { ...res }
                    console.log(this.editPower)
                }
            }).catch()
            this.insertDataDefault = JSON.parse(JSON.stringify(temp))
            this.insertData = temp
            console.log(temp)
        }
        //获取下拉框数据
        getInsertDropdownData().then(res => {
            if (res !== undefined) {
                if (res.floorType) {
                    res.floorType.length = 2
                }
                this.dictionaryTree = res
                console.log(this.dictionaryTree)
                this.isload = true
                communityFindAll().then(res => {
                    if (res !== undefined) {
                        this.community = res
                    }
                }).catch()
                areaFindTreeAll().then(res => {
                    if (res !== undefined) {
                        this.areaList = [{ dictName: this.$t('text.PageData.l191'), id: null }, ...res]
                    }
                }).catch()
            }
        }).catch()
    },
    methods: {
        //编辑时获取下拉框默认填充值
        getSelectDefault(key) {
            let findContain = this.dictConver.filter(v => v === key)
            if (findContain.length > 0) {
                //需要进行转换
                let defaultName = this.dictionaryTree[key].filter(v => v.dictValue === this.insertData[key])
                if (defaultName.length <= 0) return ''
                return defaultName[0].dictName
            } else {
                //不需要转换直接返回
                return this.insertData[key]
            }
        },
        //查看业主
        showOwnerClick() {
            this.showOwner = !this.showOwner
            if (!this.editPower.editOwner) {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.PageData.l230'),
                    type: 'error',
                })
            } else {
                lookOwnerInfo({ houseId: this.insertData.id }).then(res => {
                    if (res !== undefined) {
                        console.log(res)
                        let temp = { ownerName: res.owner_name, ownerPhone: res.owner_phone }
                        this.insertData = { ...this.insertData, ...temp }
                        console.log(this.insertData)
                    }
                }).catch()
            }
        },
        //查看门牌
        showPlateClick() {
            this.showPlate = !this.showPlate
            if (!this.editPower.editPlate) {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.PageData.l230'),
                    type: 'error',
                })
            } else {
                lookDoorPlate({ houseId: this.insertData.id }).then(res => {
                    if (res !== undefined) {
                        console.log(res)
                        // let temp={
                        //     unit:res.unit,
                        //     building:res.building,
                        //     roomIdentifier:res.roomIdentifier
                        // }
                        this.insertData = { ...this.insertData, ...res }
                    }
                }).catch()
            }
        },
        //查看底价
        showBasePriceClick() {
            this.showBasePrice = !this.showBasePrice
            if (!this.editPower.editBasePrice) {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.PageData.l230'),
                    type: 'error',
                })
            }
        },
        //数据格式不统一
        getRR(item) {
            if (this.isEdit && this.insertData[item] != null && this.insertData[item] != "")
                if (Object.prototype.toString.call(this.insertData[item]) === '[object Array]') {
                    return this.insertData[item]
                } else {
                    return this.insertData[item].split(',')
                }
        },

        handleClick() {
            let flag = true
            for (let index = 1; index <= 13; index++) {
                const childRef = this.$refs['child' + index]
                if (childRef && !childRef.inputReturn()) {
                    flag = flag && false
                }
            }
            this.addHousePage.forEach((element, index1) => {
                element.data.forEach((item, index2) => {
                    const childRef = this.$refs['childs' + index1 + index2]
                    if (childRef && childRef.length > 0 && !childRef[0].inputReturn()) {
                        flag = flag && false
                    }
                });
            });
            if (flag) {
                this.insert()
            } else {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.Common.l999'),
                    type: 'error',
                })
            }
        },

        //切换
        getRouter(index) {
            switch (index) {
                case 1: this.addHousePage = addHousePage1; this.insertData = { houseClass: 0, houseType: 0 }; break;
                case 2: this.addHousePage = addHousePage2; this.insertData = { houseClass: 0, houseType: 1 }; break;
                case 3: this.addHousePage = addHousePage3; this.insertData = { houseClass: 0, houseType: 2 }; break;
                case 4: this.addHousePage = addHousePage4; this.insertData = { houseClass: 0, houseType: 3 }; break;
                case 5: this.addHousePage = addHousePage5; this.insertData = { houseClass: 0, houseType: 4 }; break;
                case 6: this.addHousePage = addHousePage6; this.insertData = { houseClass: 1, houseType: 0 }; break;
                case 7: this.addHousePage = addHousePage7; this.insertData = { houseClass: 1, houseType: 1 }; break;
                case 8: this.addHousePage = addHousePage8; this.insertData = { houseClass: 1, houseType: 2 }; break;
                case 9: this.addHousePage = addHousePage9; this.insertData = { houseClass: 1, houseType: 3 }; break;
                case 10: this.addHousePage = addHousePage10; this.insertData = { houseClass: 1, houseType: 4 }; break;
            }
        },
        //提交上传
        insert() {
            this.loading = true
            if (this.isEdit) {
                //租售互转
                if (this.$route.query.convert) {
                    hireSellChange({ id: this.$route.query.id, newStatus: this.$route.query.newStatus, oldStatus: this.$route.query.oldStatus, }).then(res => {
                        if (res !== undefined) {
                            setTimeout(() => {
                                houseUpdate(this.insertData).then(res => {
                                    this.loading = false
                                    if (res !== undefined) {
                                        ElMessage.success({
                                            showClose: true,
                                            message: this.$t('text.Common.l3'),
                                            type: 'success',
                                        })
                                        this.$router.back()
                                    }
                                }).catch(this.loading = false)
                            }, 1100)
                        } 
                    }).catch(this.loading = false)
                    return;
                }

                houseUpdate(this.insertData).then(res => {
                    this.loading = false
                    if (res !== undefined) {
                        ElMessage.success({
                            showClose: true,
                            message: this.$t('text.Common.l3'),
                            type: 'success',
                        })
                        this.$router.back()
                    }
                }).catch(this.loading = false)
            } else {
                houseInsert(this.insertData).then(res => {
                    this.loading = false
                    if (res !== undefined) {
                        ElMessage.success({
                            showClose: true,
                            message: this.$t("text.Customer.l1"),
                            type: 'success',
                        })
                        this.$router.back()
                    }
                }).catch(this.loading = false)
            }
        },
        //接收返回值
        setData(obj) {
            this.insertData = { ...this.insertData, ...obj }
            console.log(this.insertData)
        },
        setData2(obj){
            // obj={address:obj.address,community:obj.address}
            this.insertData = { ...this.insertData, ...obj }
        },
        setMapAddress(form) {
            let obj = {
                address: form.address,
                mapCoordinates: form.lng + "," + form.lat,
                // community:form.address,
            }
            this.insertData = { ...this.insertData, ...obj }
        },
    },
    watch: {
    },
    computed: {

    }

}
</script>
    
<style scoped>
.addHouse {
    width: 100%;
}

.main {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin: 0 auto;
}

.w {
    width: 100%;
}

.df {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 25px;
    border-bottom: 1px solid rgb(220, 223, 230);
}

.title {
    font-size: 12px;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 5px;
    width: 158px;
    font-weight: 600;
}

.df2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid rgb(220, 223, 230);
    padding-top: 7px;
    padding-bottom: 7px;
    position: sticky;
    top: 29px;
    background: white;
    z-index: 53;
    box-shadow: 1px 1px 10px 5px #f8f8f8
}

.headTitle {
    font-size: 14px;
    color: #aaa;
    text-align: left;
    padding-top: 20px
}

.must {
    font-size: 12px;
    color: red;
    padding-right: 5px;
}

.editDiv {
    color: white;
    background: #429df8;
    font-size: 12px;
    width: 158px;
    height: 24px;
    border-radius: 3px;
    line-height: 24px;
}
</style>